﻿@page "/"
@using Rental.Data
@using Rental.Data.Context
@inject RentalContext RentalContext

<Navigation/>

<section id="car-rental-bg-image-cover" class="bg-dark p-5">
    <div class="text-center text-white m-sm-5 px-sm-5">
        <h1 class="fw-light">WELCOME TO GARAGE</h1>
        <h2 class="fw-bold">BOOK A CAR TODAY! SAVE UP TO 30%</h2>
        <p class="mt-5 text-muted">Garage makes car renting an easy matter, even if you are renting out a sports coupe
            for a weekend ride.
            We will make sure your car will fit your specific needs!</p>

        <button class="btn btn bg-primary text-white">FIND A CAR</button>
    </div>
</section>

<section class="p-3 p-sm-5">
    <h3 class="my-5 text-center">LET’S FIND YOUR PERFECT CAR</h3>

    <form class="col-sm-5 col-10 mx-auto">
        <select class="form-select my-2 border-start-0 border-end-0 border-top-0">
            <option selected>Car Type</option>
        </select>

        <select class="form-select my-2 border-start-0 border-end-0 border-top-0">
            <option selected>Pick-up Location</option>
        </select>

        <select class="form-select my-2 border-start-0 border-end-0 border-top-0">
            <option selected>Date</option>
        </select>

        <div class="text-center">
            <button class="btn btn-dark text-white mt-5">Search Now</button>
        </div>
    </form>
</section>

<section class="row row-cols-1 row-cols-sm-2 row-cols-xxl-3 text-center mx-sm-5 p-5 p-xxl-5">
    
    @if (_cars.Count == 0)
    {
        <p>Noping</p>
    }
    else
    {
        foreach (var car in _cars)
        {
            <CardVehicle Title=@car.Name Image=@car.Image Price=@car.Price License="@car.License" />
        }
    }

</section>

<section id="car-rental-bg-image-mustang"
         class="row row-cols-1 row-cols-sm-3 row-cols-xxl-4 bg-dark p-sm-5 text-center">
    <div class="col mt-5 px-xxl-5">
        <h5 class="text-white">01. Car Rentals</h5>

        <ul class="text-muted text-start small ms-5 pt-3 mb-5" style="list-style-type: none">
            <li class="pt-1">Economy</li>
            <li class="pt-1">Standard</li>
            <li class="pt-1">Premium/Luxury</li>
        </ul>

        <div class="text-white py-5 rounded mx-3" style="background-color: #1a1e21">
            <div class="fw-bold" style="font-size: 65px">10</div>
            <div>CAR TYPES</div>
        </div>
    </div>

    <div class="col mt-5 px-xxl-5">
        <h5 class="text-white">02. Easy Payment</h5>

        <ul class="text-muted text-start small ms-5 pt-3 mb-5" style="list-style-type: none">
            <li class="pt-1">Credit Cards</li>
            <li class="pt-1">PayPal</li>
            <li class="pt-1">Cheques</li>
        </ul>

        <div class="text-white py-5 rounded mx-3" style="background-color: #1a1e21">
            <div class="fw-bold" style="font-size: 65px">75</div>
            <div>CARS & VEHICLES</div>
        </div>
    </div>

    <div class="col mt-5 px-xxl-5">
        <h5 class="text-white">03. Benefits</h5>

        <ul class="text-muted text-start small ms-5 pt-3 mb-5" style="list-style-type: none">
            <li class="pt-1">Unlimited Mileage</li>
            <li class="pt-1">Full Insurance</li>
            <li class="pt-1">24/7 Assistance</li>
        </ul>

        <div class="text-white py-5 rounded mx-3" style="background-color: #1a1e21">
            <div class="fw-bold" style="font-size: 65px">20</div>
            <div>YEARS OF EXPERIENCE</div>
        </div>
    </div>

    <div class="col-12 mt-5 text-white px-xxl-5">
        <h3 class="mt-5">WHAT WE OFFER</h3>
        <p class="px-5 px-sm-0 px-xxl-5">Our company provides a variety of useful options to our new & regular
            clients.</p>
        <div class="text-start ms-5 ps-5">
            <img class="img-fluid ms-5" src="img/png/Firm.png">
        </div>
    </div>
</section>

<section class="row row-cols-1 row-cols-sm-3 p-5 m-5 text-center">
    <div class="col">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"
             class="bi bi-star text-primary" viewBox="0 0 16 16">
            <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.523-3.356c.329-.314.158-.888-.283-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767l-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288l1.847-3.658 1.846 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.564.564 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
        </svg>

        <h5 class="mt-3">Premium Service</h5>
        <p class="text-muted mt-3">We provide high-quality service for all our clients.</p>
    </div>

    <div class="col">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"
             class="bi bi-geo-alt text-primary" viewBox="0 0 16 16">
            <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
            <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
        </svg>

        <h5 class="mt-3">Variety of Locations</h5>
        <p class="text-muted mt-3">You can rent our cars throughout the Colombia.</p>
    </div>

    <div class="col">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"
             class="bi bi-people text-primary" viewBox="0 0 16 16">
            <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
        </svg>

        <h5 class="mt-3">Qualified Team</h5>
        <p class="text-muted mt-3">Our fully professional team can handle any car rental queries.</p>
    </div>
</section>

<section class="row p-5 mx-sm-5">
    <h3 class="px-xxl-5 display-6 me-xxl-5 mb-xxl-5"><span class="mx-xxl-5 px-xxl-5">TESTIMONIALS</span></h3>

    <div class="col-sm-6 col-xxl-4 offset-xxl-2 px-xxl-5">
        <p class="h5 fw-light fw-lighter mt-3 lh-base"
           style='font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;'>
            The car I rented from you was immaculate and it performed really well. I would definitely use your company
            again in the future.</p>
        <p class="fw-bold mt-4 text-end me-5">JOHN SMITH</p>
    </div>

    <div class="col-sm-6 col-xxl-4 px-xxl-5">
        <p class="h5 fw-light fw-lighter mt-3 lh-base"
           style='font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;'>
            Thank your providing the car for us. It was a great and reliable sedan. I’m going to recommend you to our
            friends and colleagues.</p>
        <p class="fw-bold mt-4 text-end me-5">KATE WILLIAMS</p>
    </div>
</section>

<section class="p-3 p-sm-5 bg-white">
    <div class="text-center p-3">
        <img src="img/jpg/First.jpg" alt="People" class="img-fluid"/>
        <img src="img/jpg/Second.jpg" alt="People" class="img-fluid"/>
        <img src="img/jpg/Third.jpg" alt="People" class="img-fluid"/>
        <img src="img/jpg/Four.jpg" alt="People" class="img-fluid"/>
    </div>

    <div class="row row-cols-1 row-cols-sm-2 p-5 mx-xxl-5">
        <div class="col px-xxl-5">
            <h4 class="fw-lighter">OUR TEAM</h4>
            <p class="text-muted mt-5">We are a dedicated team of car rental experts who are always glad to help you
                choose the car according to your needs.</p>
        </div>

        <div class="col px-xxl-5">
            <h1 class="display-1">24 <span class="h6">TEAM MEMBERS</span></h1>
            <p class="mt-3">28 exceptional full-time professionals</p>
            <p>5-year specialized team member practice</p>
        </div>
    </div>
</section>


<section class="p-3 p-sm-5 bg-light">
    <h3 class="px-5 mx-sm-5">GET IN TOUCH WITH US</h3>

    <p class="px-5 mx-sm-5 mt-3 text-muted">Feel free to contact our specialists to find out more about our cars and
        prices. We are always ready to answer your questions.</p>

    <form class="px-sm-5 m-5">
        <label class="col-12 col-xxl-3 offset-xxl-1">
            <input class="form-control my-2 border-start-0 border-end-0 border-top-0 bg-light" placeholder="Name">
        </label>

        <label class="col-12 col-xxl-3">
            <input class="form-control my-2 border-start-0 border-end-0 border-top-0 bg-light" placeholder="E-Mail">
        </label>

        <label class="col-12 col-xxl-3">
            <input class="form-control my-2 border-start-0 border-end-0 border-top-0 bg-light" placeholder="Phone">
        </label>

        <label class="col-12">
            <input class="form-control my-2 border-start-0 border-end-0 border-top-0 bg-light" placeholder="Message">
        </label>

        <button class="btn btn-dark text-white mt-5">Send</button>
    </form>
</section>

<Footer></Footer>

@code {
    
    private List<Car> _cars;
    
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        _cars = await RentalContext.GetAllOwnCars();
    }

}